{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>教师课表</h2>
        
        <div class="card mb-4">
            <div class="card-header">
                <h5>教师列表</h5>
            </div>
            <div class="card-body">
                <div id="teachersList" class="row">
                    <!-- 教师列表将在这里动态加载 -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 课表详情模态框 -->
<div class="modal fade" id="scheduleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scheduleModalLabel">课表详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="scheduleModalBody">
                <!-- 课表内容将在这里显示 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <a id="downloadScheduleBtn" href="#" class="btn btn-primary" download>下载课表</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function loadSchedules() {
    axios.get('/api/schedules')
        .then(response => {
            displaySchedules(response.data);
        })
        .catch(error => {
            console.error('加载课表失败:', error);
        });
}

function displaySchedules(schedules) {
    const container = document.getElementById('teachersList');
    
    if (schedules.length === 0) {
        container.innerHTML = '<div class="col-12 text-center"><p>暂无课表</p></div>';
        return;
    }
    
    container.innerHTML = '';
    
    schedules.forEach(schedule => {
        const card = document.createElement('div');
        card.className = 'col-md-3 col-sm-4 mb-3';
        
        card.innerHTML = `
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-user-circle fa-3x text-info mb-2"></i>
                    <h6 class="card-title">${schedule.teacher_name}</h6>
                    <p class="text-muted small">${new Date(schedule.upload_time).toLocaleDateString()}</p>
                    <button class="btn btn-sm btn-info" onclick="viewSchedule(${schedule.id}, '${schedule.teacher_name}')">
                        查看课表
                    </button>
                </div>
            </div>
        `;
        
        container.appendChild(card);
    });
}

function viewSchedule(scheduleId, teacherName) {
    axios.get('/api/schedules')
        .then(response => {
            const schedule = response.data.find(s => s.id === scheduleId);
            if (schedule) {
                showScheduleModal(schedule, teacherName);
            }
        })
        .catch(error => {
            console.error('加载课表详情失败:', error);
        });
}

function showScheduleModal(schedule, teacherName) {
    const modal = new bootstrap.Modal(document.getElementById('scheduleModal'));
    const modalTitle = document.getElementById('scheduleModalLabel');
    const modalBody = document.getElementById('scheduleModalBody');
    const downloadBtn = document.getElementById('downloadScheduleBtn');
    
    modalTitle.textContent = `${teacherName} - 课表`;
    
    if (schedule.file_type === 'image') {
        modalBody.innerHTML = `<img src="/static/uploads/schedule/${schedule.schedule_file}" class="img-fluid" alt="课表">`;
        downloadBtn.href = `/download/schedule/${schedule.schedule_file}`;
    } else if (schedule.file_type === 'table') {
        // 加载HTML表格
        fetch(`/static/uploads/schedule/${schedule.schedule_file}`)
            .then(response => response.text())
            .then(html => {
                modalBody.innerHTML = html;
                downloadBtn.href = `/download/schedule/${schedule.schedule_file}`;
            });
    }
    
    modal.show();
}

// 页面加载时加载课表
document.addEventListener('DOMContentLoaded', loadSchedules);
</script>
{% endblock %}
